import React,{useState} from 'react';
import List from './component/lists';
import './style.css';

export default function TodoList() {

    const [lists,setLists] = useState([]);

    const [val,setVal] = useState('');

    function updateVal(e) {

        setVal(e.target.value);
        
    }

    function addList() {

        setLists([
            ...lists,
            {
                id:lists.length === 0?0:lists[lists.length - 1].id + 1,
                desc:val
                
            }
        ]);
        setVal('');
    } 

    function deleteList(e) {

        let id = Number(e.target.id);
        console.log(id);
        let newLists = lists.filter(item => {
            if(item.id === id) {
                return false;
            }else {
                return true;
            }
        })
        setLists(newLists);
    }

    // function isDoned() {
    //     const newLists = lists.slice();
    //     setLists(newLists);
    // }
    return (
        <div className="container">
        
        <div className="todolist">
            <div className="todolist_head" >TodoList</div>

            <div className="todolist_input">
                <input type="text" value={val} onChange={updateVal}/>
                <button onClick={addList} >添加</button>
            </div>

            <div className="todolist_lists">
                
                {
                    lists.map(list => {

                        return (
                            
                            <div className="todolist_list" key={list.id}>
                            
                               <List data={list.desc}/>
                               <button className="todolist_button" onClick={deleteList} id={list.id}>x</button>
                            </div>
                            

                        )
                    })
                }
                

            </div>
            <div className="todolist_overview">

                <div>总事件数：{lists.length}</div>

            </div>


        </div>

        
        </div>
    )
}